<template>
	<view class="Navbar">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="">

		</view>
		
		<view class="Navbar-cont">
			<u-row gutter="16">
				<u-col span="1" @tap="clickLeft">
					<u-icon name="list" @click="show = true" size="50rpx"></u-icon>
				</u-col>
				<u-col span="10">
					<u-search @tap='search' placeholder="日照香炉生紫烟" v-model="keyword" :disabled=true :show-action="false">
					</u-search>
				</u-col>
				<u-col span="1">
					<u-icon name="mic" size="50rpx"></u-icon>
				</u-col>
			</u-row>
		</view>

		<view class="forms">
			<u-popup ref="drawer" v-model="show" width="85%">
				<scroll-view scroll-y="true" style="background-color: #f5f5f5; touch-action:false; ">
					<view class="status_bar">
						<!-- 这里是状态栏 -->
					</view>
					<view class="user">
						<view class="userimg">
							<view class="left">
								<!-- 用户名字头像等 -->
								<image @tap="userMessage" v-if="user" :src="user.avatarUrl" mode=""></image>
								<!-- <u-avatar :src="src" v-else mode="circle" size="55"></u-avatar> -->
								<u-icon name="account-fill" v-else size="55" @tap="gotologin"></u-icon>
								<text @tap="userMessage" style="margin-left: 20rpx;"
									v-if="user">{{user.nickname}}</text>
								<text style="margin-left: 20rpx;" v-else @tap="gotologin">前往登录</text>
								<u-icon size="30" name="arrow-right"></u-icon>
							</view>
							<!-- 扫码 -->
							<view class="right">
								<u-icon @click="sweep" name="scan" size="50"></u-icon>
							</view>
						</view>
					</view>
					<view class="vip">
						<view class="header">
							<text class="tx1">开通黑胶vip</text>
							<text class="tx2">会员中心</text>
						</view>
						<view class="zhongjian">
							<text>
								立享超17项专属特权
							</text>
							<u-icon color="#ccc" name="arrow-right"></u-icon>
						</view>
						<view class="footer">
							<text class="text1">
								黑胶现时低至五元！会员日特价！
							</text>
							<view class="text2">
								<view>黑胶</view>
								<view>五元</view>
							</view>
						</view>
					</view>
					<view class="message">
						<view>
							<view class="left">
								<image src="../static/icon/xf.png" mode=""></image>
								<text>我的消息</text>
							</view>
							<view class="right">
								<view class="msg">
									<text>2</text>
								</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view>
							<view class="left">
								<image src="../static/icon/cloud.png" mode=""></image>
								<text>云贝中心</text>
							</view>
							<view class="right">
								<view>签到</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>


						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/ling.png" mode=""></image>
								<text>创作者中心</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>

					<!-- 音乐服务 -->
					<view class="message">
						<view>
							<view class="left">
								<text style="color:#CDCDCD;font-size: 20rpx;">音乐服务</text>
							</view>

						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/piao.png" mode=""></image>
								<text>云村有票</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>

						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/gw.png" mode=""></image>
								<text>商城</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>

						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>游戏专区</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>

						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/cailing.png" mode=""></image>
								<text>口袋彩铃</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>

						</view>
					</view>
					<!-- 其他模块 -->
					<view class="message">
						<view>
							<view class="left">
								<text style="color:#CDCDCD;font-size: 20rpx;">其他</text>
							</view>

						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>设置</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>夜间模式</text>
							</view>
							<view class="right">
								<switch checked="true" />
							</view>
						</view>
						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>定时关闭</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>个性装扮</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>边听边存</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>音乐黑名单</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>青少年模式</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>音乐闹钟</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<!-- 我的客服模块 -->
					<view class="message">

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>我的客服</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>分享网易云音乐</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>

						<view style="border-bottom: none;">
							<view class="left">
								<image src="../static/icon/games.png" mode=""></image>
								<text>关于</text>
							</view>
							<view class="right">
								<view></view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<view class="btn">
						<u-button class='customStyle' @tap='shouproplist'>退出登录/关闭</u-button>
					</view>
				</scroll-view>
				<view class="prop">
					<u-popup class="propList" v-model="shows" mode="bottom" height="18%" border-radius="50">
						<view class="prop">
							<view class="prop-item">
								<text>退出/关闭</text>
							</view>
							<view class="close">
								<text>关闭Emo云音乐</text>
							</view>
							<view class="sign-out" @tap="exit">
								<text>退出云音乐登录</text>
							</view>
						</view>
					</u-popup>

				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getUser
	} from '../network/user.js'
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				show: false,
				keyword: '',
				background: {
					backgroundColor: '#fd544e', //Navbar颜色
				},
				h: "",
				shows: false,
				user: '',
				flag: false,
				userInfo: {
					avatarUrl: "",
					nickname: "",
				}, //
			};
		},
		methods: {
			async getUserContent(id) {
				const {
					profile: {
						avatarUrl,
						nickname
					},
				} = await getUser(id);
				this.userInfo = {
					avatarUrl,
					nickname
				}
			},
			clickLeft() {
				this.$refs.drawer.open()
				console.log('123');
			},
			shouproplist() {
				this.shows = !this.shows
			}, //退出弹出框
			clickRigh() {
				console.log(2)
			}, //navbar 右按钮
			search() {
				uni.reLaunch({
					url: '/subpag/search/search'
				})
				console.log('******');
			}, //search
			close() {
				this.$refs.drawer.close()
			},
			cover() {
				this.show = !this.show
			},
			sweep() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}, //扫一扫
			exit() {
				uni.clearStorage();
				uni.reLaunch({
					url: "/components/login/login"
				});
			}, //退出登录
			gotologin() {
				uni.reLaunch({
					url: "/components/login/login"
				});

			}, //前往登录
			userMessage() {
				uni.navigateTo({
					url: '/subpag/userMessage/userMessage'
				})
			}, //前往用户信息
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					this.h = res.windowHeight - 10 + 'px'
				}

			})
			this.user = uni.getStorageSync("userData")
		}
	}
</script>

<style>
	/* // 弹出层样式 */
	.prop {
		z-index: 3;
		width: 100%;
		/* padding: 0rpx 30rpx; */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;
	}

	.prop-item {
		padding: 30rpx 30rpx;
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		/* border-radius: 10px; */
		flex-direction: column;
	}

	/* 关闭 */
	.close {
		padding: 30rpx 30rpx;
		display: flex;
		/* border-radius: 10px; */
		flex-direction: column;
	}

	/* 退出登录 */
	.sign-out {
		padding: 10rpx 30rpx;
		display: flex;
		/* border-radius: 10px; */
		flex-direction: column;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.Navbar {
		padding: 24rpx;
	}

	.user {
		margin: 0 30rpx;
	}

	.userimg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;


	}

	.userimg>.left {
		display: flex;
		align-items: center;
	}

	.userimg>.left>image {
		width: 60rpx;
		border-radius: 100%;
		height: 60rpx;
	}

	/* .forms {
		z-index: 10;
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
		background-color: #ccc;
		border: 1px solid red;
	} */

	.right {
		display: flex;
		align-items: center;
	}

	.right>.msg {
		background-color: red;
		height: 40rpx;
		color: white;
		border-radius: 100%;
	}

	.right>.msg>text {
		margin: 0 10rpx;
	}

	.u-row {}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}


	/*  我的消息模块 */
	.vip {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(#8D8D8D, #B1B1B1);
		border-radius: 20px;
		margin: 0 30rpx;

	}

	.vip>.footer {
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.vip>.footer>.text1 {
		color: #D9D9D9;
		font-size: 20rpx;
	}

	.text2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 5px;
		width: 70rpx;
		text-align: center;
		background-color: #F43600;
		color: white;
		font-weight: 600;
	}


	.zhongjian {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
		background-color: transparent !important;

	}

	.zhongjian>text {
		color: #D9D9D9;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.header>.tx1 {
		font-size: 40rpx;
		color: white;
	}

	.header>.tx2 {
		font-size: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		padding: 5rpx;
		box-sizing: border-box;
		border: 1px solid #fff;
		color: white;
	}

	/* 	 其他 */
	.message {
		margin-top: 40rpx;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 40rpx 30rpx;
	}

	.message>view>.left {
		display: flex;
		align-items: center;

	}

	.message>.right {
		display: flex;
		align-items: center;
	}

	.message>.right>.msg {
		background-color: red;
		height: 40rpx;
		color: white;
		border-radius: 100%;
	}

	.message>.right>.msg>text {
		margin: 0 10rpx;
	}



	.message>view {
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EAEAEA;
	}

	.message>view>view>image {
		width: 25px;
		height: 25px;
		margin-top: 0px;
		margin-right: 20rpx;
	}

	/* 按钮设置 */
	.btn {
		margin: 20rpx 30rpx;
		color: red;
	}

	.customStyle {
		color: red;
	}
</style>
